import React, { Component, PureComponent, lazy, Suspense } from 'react'
import { Route, Switch, Redirect } from 'react-router-dom'
import { connect } from 'react-redux';
import screenfull from 'screenfull'
import { Button, Tag, Tabs, Layout, Dropdown, Menu, Avatar, Image, Breadcrumb } from 'antd'
import { MenuOutlined, MenuFoldOutlined, MenuUnfoldOutlined, ExpandOutlined, CompressOutlined, AppstoreOutlined, CaretDownOutlined, UserOutlined } from '@ant-design/icons'
import { updateCollpased } from "@/redux/actions/collapsed";
import { nanoid } from 'nanoid'

class RightContainer extends PureComponent {

  render() {
    const { collapsed } = this.props
    return (
      <>
        <div className="right-area-top">
          {
            collapsed ? <MenuUnfoldOutlined className="font-size-20 top-icon" onClick={this.props.updateCollpased} /> : <MenuFoldOutlined className="font-size-20 top-icon" onClick={this.props.updateCollpased} />
          }
          <Breadcrumb>
            <Breadcrumb.Item onClick={this.goMainPage} className="bread-own">
              <span>首页</span>
            </Breadcrumb.Item>
            <Breadcrumb.Item className="bread-own-toother">
              <span>{this.props.routerInfo.name}</span>
            </Breadcrumb.Item>
          </Breadcrumb>
          <div className="top-content"></div>
          {
            <AppstoreOutlined className="to-main-icon font-size-20" onClick={this.goMainPage} />
          }
          {
            <ExpandOutlined className="screen-out-icon font-size-20" onClick={() => { screenfull.toggle() }} />
          }
          <Dropdown overlay={this.menuDropdownItemList} trigger={['click']}>
            <a className="normarl-a" onClick={e => e.preventDefault()}>
              <Avatar
                size="default"
                style={{ backgroundColor: '#02c26e' }}
                icon={<UserOutlined />}
              />
                管理员<CaretDownOutlined />
            </a>
          </Dropdown>,
                        </div>
        {/* <TagList></TagList> */}

        <div className="right-area-bottom">
          <div className="right-area-bottom-content">
            {this.props.children}
          </div>
        </div>
      </>
    )
  }
}

export default connect(
  state => ({
    persons: state.persons,
    collapsed: state.collapsed
  }),//映射状态
)(RightContainer)
